<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="../../css/mui.min.css" />
		<link rel="stylesheet" type="text/css" href="../../js/dist/APlayer.min.css" />
	</head>
	<style>
		.main {
			position: relative;
		}
		
		.mui-bar-nav {
			-webkit-box-shadow: none;
			box-shadow: none;
			background: none;
		}
		
		.mui-title,
		.mui-icon-left-nav {
			color: #fff;
		}
		
		.mui-content {
			width: 100%;
			background: url(../../imges/283974360740381381.png);
			background-size: cover;
		}
		
		.aplayer .aplayer-lrc {
			height: 50%;
		}
		
		.information {
			position: fixed;
			bottom: 104px;
			display: flex;
			text-align: center;
			right: 12px;
			transition: .2s;
		}
		
		.information>div {
			padding: 0 12px;
		}
		
		.frequency_text,
		.average_text {
			font-size: 12px;
			color: #62A0E2;
		}
		
		.average_num,
		.frequency_num {
			color: #B8DEF8;
		}
		
		.operation {
			position: fixed;
			bottom: 24px;
			display: flex;
			width: 100%;
			padding: 0 24px;
			transition: .3s;
		}
		
		.operation>div {
			flex: 1;
			border-radius: 50px;
			overflow: hidden;
			margin-right: 24px;
		}
		
		.mui-btn-outlined.mui-btn-blue,
		.mui-btn-outlined.mui-btn-primary {
			color: #fff;
			border-color: #84A4DF;
		}
		
		.operation>div:last-child {
			background: #34d498;
			margin: 0;
		}
		
		.operation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.countdown {
			position: fixed;
			top: 50%;
			left: 50%;
			text-align: center;
			margin-left: -46px;
			margin-top: -60px;
			font-size: 60px;
		}
		
		.countdown_opacity {
			border-radius: 50%;
			width: 92px;
			height: 92px;
			background: #fff;
			opacity: 0.5;
		}
		
		.countdown_num {
			position: absolute;
			top: 0;
			width: 92px;
			height: 92px;
			line-height: 92px;
			color: #fff;
		}
		
		.countdown_text {
			position: fixed;
			bottom: 84px;
			color: #71AAE6;
			width: 100%;
			text-align: center;
		}
		
		.countdown_time {
			margin-top: 32px;
		}
		
		.resultoperation {
			display: flex;
			padding: 0 24px;
			position: absolute;
			width: 100%;
			bottom: 24px;
		}
		
		.mui-btn-warning,
		.mui-btn-yellow {
			background: #FFA21A;
		}
		
		.resultoperation>button:first-child {
			margin-right: 24px;
		}
		
		.resultoperation button {
			width: 100%;
			border-radius: 50px;
		}
		
		.result {
			position: fixed;
			bottom: 0;
			width: 100%;
			z-index: 100;
			background: #fff;
			text-align: center;
			border-radius: 8px 8px 0 0;
			height: 44%;
			font-size: 12px;
			color: #B2B2B2;
			transition: .3s;
		}
		
		.score {
			margin: 12% 0px;
		}
		
		.score_num {
			font-size: 30px;
			color: #F87171;
			margin-bottom: 8px;
		}
		
		.play {
			position: absolute;
			top: -46px;
			width: 100%;
			display: flex;
			padding: 0 16px;
		}
		
		.progress {
			flex: 1;
		}
		
		.progress>div {
			width: 80%;
			height: 2px;
			background: #6A9EDC;
			margin: 20px auto;
		}
		
		.play>div {
			display: inline-block;
		}
		
		.planzantin {
			width: 40px;
		}
		
		.planzantin>img {
			width: 100%;
		}
		
		.plan_time {
			color: #fff;
			line-height: 40px;
		}
		
		.bombbox {
			position: fixed;
			width: 290px;
			z-index: 2000;
			top: 50%;
			left: 50%;
			margin-top: -25%;
			margin-left: -145px;
		}
		
		.bombbox img {
			width: 100%;
			vertical-align: middle;
			height: 100%;
		}
		
		.bombbox_img {
			height: 138px;
		}
		
		.success_data {
			position: absolute;
			top: 16px;
			right: 20px;
			text-align: center;
		}
		
		.integral {
			margin: 8% 0;
		}
		
		.determine {
			width: 122px;
		}
		
		.determine>button {
			width: 100%;
		}
		
		@media screen and (max-height:480px) {
			.aplayer .aplayer-lrc {
				height: 40px;
			}
			.countdown_time {
				margin-top: 20px;
			}
			.countdown_text {
				bottom: 60px;
			}
			.score {
				margin: 6% 0;
			}
		}
		/*发布成功弹窗*/
		
		.success {
			display: none;
		}
		/*录制结果的下弹窗*/
		
		.result {
			bottom: -100%;
		}
		/*倒计时*/
		
		.countdown_text {
			transform: translate(-100%);
			transition: .3s;
			font-size: 14px;
		}
		
		.countdown {
			transform: translate(-300%);
			transition: .3s;
		}
		/*听听范例开始朗读*/
		
		.operation {
			/*display: none;*/
		}
		/*音频*/
		
		.aplayer-author {
			display: none;
		}
		
		.aplayer-music {
			display: none;
		}
		
		.aplayer .aplayer-info .aplayer-controller {
			position: fixed;
			bottom: 35px;
			left: 0;
			width: 90%;
			z-index: 100;
			margin-left: 5%;
			transform: translate(-120%);
			transition: .3s;
		}
		
		.aplayer {
			box-shadow: none;
			margin: 0;
		}
		/*自带播放*/
		
		.aplayer-pic {
			display: none;
		}
		
		.aplayer-withlrc.aplayer .aplayer-info {
			margin: 0;
			height: initial;
			padding: 10px 0;
		}
		
		.aplayer .aplayer-lrc {
			background: none;
			padding: 90px 0;
			margin: 40px 0 0;
			transition: .3s;
		}
		
		.aplayer .aplayer-lrc:after,
		.aplayer .aplayer-lrc:after,
		.aplayer .aplayer-lrc:before {
			display: none;
		}
		
		.aplayer .aplayer-lrc p {
			color: #fff;
			font-size: 16px;
			line-height: 30px!important;
			height: 30px!important;
		}
		
		.aplayer-bar-wrap {
			margin: 0 70px 0 70px !important;
		}
		
		.mask {
			position: absolute;
			height: 72px;
			top: -44px;
			width: 100%;
		}
		
		.mask img {
			width: 100%;
			height: 100%;
		}
		
		.close {
			width: 50px;
			height: 50px;
			position: absolute;
			top: -32px;
			left: 12px;
			border-radius: 50%;
		}
		
		.suspend {
			background: url("../../imges/zantin.png")no-repeat 8px 6px;
			background-size: 34px;
			display: none;
		}
		
		.broadcast {
			background: url("../../imges/ggGroup 1492.png");
			background-size: cover;
		}
		
		.close>img,
		.state>img {
			width: 100%;
		}
		
		.state {
			width: 50px;
			height: 50px;
			position: absolute;
			top: -32px;
			background: url("../../imges/Group 1492remo.png");
			background-size: cover;
			right: 12px;
			border-radius: 50%;
		}
		
		.aplayer-played {
			background: #fff !important;
		}
		
		.aplayer .aplayer-lrc p.aplayer-lrc-current {
			transform: scale(1.1, 1.1);
			transition: .2s;
		}
	</style>

	<body>
		<div class="main">
			<header class="mui-bar mui-bar-nav">
				<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
				<h1 class="mui-title"></h1>
			</header>
			<div class="mui-content">
				<!--<div class="song">
					<div>
						<div>解落三秋叶</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>花落知多少</div>
						<div>能开二月花</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
						<div>花落知多少</div>
						<div>夜来风雨声</div>
						<div>能开二月花</div>
					</div>
				</div>-->
				<div id="player3" class="aplayer"></div>
			</div>
			<div class="information">
				<div class="frequency">
					<div class="frequency_num">0</div>
					<div class="frequency_text">读过人次</div>
				</div>
				<div class="average">
					<div class="average_num">0</div>
					<div class="average_text">平均分</div>
				</div>
			</div>
			<div class="operation">
				<div><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined example">听听范例</button></div>
				<div class="start"><button type="button" class="mui-btn mui-btn-success">开始朗读</button></div>
			</div>

			<div class="countdown">
				<div class="countdown_opacity"></div>
				<div class="countdown_num">3</div>
			</div>

			<div class="countdown_text">
				<div class="down_text">倒计时..</div>
				<div class="countdown_time">00:01/00:41</div>
			</div>

			<div class="result">
				<div class="play">
					<div class="planzantin"><img src="../../imges/zantin.png" /></div>
					<div class="progress">
						<div></div>
					</div>
					<div class="plan_time">00:00</div>
				</div>
				<div class="score">
					<div class="score_num">97</div>
					<div>得分</div>
				</div>
				<div>
					<div>您在全星球平均得分为97分，</div>
					<div>打败了全国98%的小学生！</div>
				</div>
				<div class="resultoperation">
					<button type="button" class="mui-btn mui-btn-warning">重新录制</button>
					<button type="button" class="mui-btn mui-btn-primary">发布</button>
				</div>
			</div>

			<div class="success">
				<div class="mui-backdrop"></div>
				<div class="bombbox">
					<div class="bombbox_img"><img src="../../imges/Group 1010.png" /></div>
					<div class="success_data">
						<div>恭喜你发布成功！</div>
						<div class="integral">+5积分</div>
						<div class="determine"><button type="button" class="mui-btn mui-btn-success">确定</button></div>
					</div>
				</div>
			</div>

		</div>
		<script src="../../js/dist/APlayer.min.js"></script>
		<script src="../../js/mui.min.js"></script>
		<script src="../../js/libs/zepto_1.1.3.js"></script>
		<script src="../../js/common/common.js"></script>
		<script type="text/javascript">
			mui.init()
			window.onload = function() {
				$(".mui-content").height($(window).height())
			}
			//			fef6214d1663451eb943d9c7bda347a2
			common.ajax("student/reading/queryPage", {
				uid: common.uid,
				token: common.token,
				caseUid: "fef6214d1663451eb943d9c7bda347a2"
			}, function(data) {
				if(data.code == 200) {
					muisrc(data)
					console.log(data)
					$(".main").attr("uid", data.data.uid)
					$(".mui-title").text(data.data.caseName)
					$(".average_num").text(data.data.averageScore)
					$(".frequency_num").text(data.data.readingCount)
				} else {
					mui.toast(data.message)
				}
			}, "get")

			function muisrc(data) {
				var time = []
				$.each(data.data.caseTimeList, function(e, a) {
					time.push(a.split(".").join(":") + '.00')
				})

				var temp = ""
				for(var i = 0; i < data.data.caseLycList.length; i++) {
					temp += '[' + time[i] + ']' + data.data.caseLycList[i] + "\n"
				}
				var ap3 = new APlayer({
					element: document.getElementById('player3'),
					narrow: false,
					autoplay: false,
					showlrc: 1,
					mutex: true,
					theme: '#615754',
					preload: 'metadata',
					music: {
						title: data.data.caseName,
						author: '',
						url: data.data.caseUrl,
						pic: '',
						lrc: temp
					}
				});
				ap3.init();
				
				$('.example').on("tap", function() {
					$(this).parents(".operation").css({
						'transform': 'translate(100%)'
					})
					$(".aplayer-controller").css({
						'transform': 'translate(0)'
					})
				})
				$(".broadcast").on("tap", function() {
					ap3.play()
					$(this).hide()
					$(".suspend").show()

				})
				$(".suspend").on("tap", function() {
					ap3.pause()
					$(this).hide()
					$(".broadcast").show()
				})
				$(".state").on("tap", function() {
					ap3.pause()
					$(".suspend").hide()
					$(".broadcast").show()
					$(".operation").css({
						'transform': 'translate(0%)'
					})
					$(".aplayer-controller").css({
						'transform': 'translate(-120%)'
					})
				})
				$(".start").on("tap", function() {
					ap3.audio.loop = false
					ap3.audio.currentTime = 0
					transform(".operation", "100%")
					transform(".countdown_text", "0%")
					transform(".countdown", "0%")
					transform(".information", "100%")
					transform(".countdown_time", "100%")
					transform(".aplayer-lrc", "100%")
					transform(".countdown", "0%")
					var num = Number($(".countdown_num").text()) + 1
					countdown()

					function countdown() {
						if(num <= 0) {
							$(".countdown_time").css("transition", ".3s")
							transform(".aplayer-lrc", "0%")
							transform(".countdown", "-300%")
							transform(".countdown_time", "0%")
							$(".down_text").text("录制中..")
							ap3.play()
							return
						}
						num--
						$(".countdown_num").text(num)
						setTimeout(countdown, 1000)
					}
				})
			}

			function transform(label, move) {
				$(label).css({
					'transform': 'translate(' + move + ')'
				})
			}
		</script>
	</body>

</html>